<template>
    <div>
<!--      <div>-->
<!--        <el-link type="success">监控查看<i class="el-icon-view el-icon&#45;&#45;right"></i> </el-link>-->
<!--      </div>-->
      <div class="filter-container" style="margin-bottom: 20px;margin-top: 20px">
        <i :class="[refresh? 'el-icon-refresh go' : 'el-icon-refresh']" style="margin-left: 10px;cursor: pointer" @click="iconClick" />
        <el-input v-model="keyword"  placeholder="区域名" style="width: 200px;margin-left: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilter">
          搜索
        </el-button>
        <el-button @click="openDialog">添加监控区域</el-button>
      </div>
      <div style="margin-top: 10px;display: flex;flex-wrap: wrap">
<!--        实时监控列表-->
        <div :key="item.id" v-for="item in list" class="videoBox">
          <img v-if="item.url!==undefined && item.url.length>0&&item.url!==null"
               :src="'http://127.0.0.1:5000/video_feed?src='+item.url"
               frameborder="0" width="400px" style="height: fit-content;min-height: 225px;cursor: pointer"
               @click="toDetail(item.id)">
          <el-image v-else style="width: 400px;height: 225px"></el-image>
          <div style="margin-top: 10px">
            <el-descriptions size="mini" :column="1" border>
              <el-descriptions-item label="区域名">{{item.name}}</el-descriptions-item>
              <el-descriptions-item label="禁区类型">
                <span v-if="item.type===0">无</span>
                <span v-if="item.type===1">下半部分禁区</span>
                <span v-if="item.type===2">矩形禁区</span>
              </el-descriptions-item>
              <el-descriptions-item label="更多操作">
                <el-tag style="margin-right: 10px;cursor: pointer" @click="openDialog(item)">修改</el-tag>
                <el-tag type="danger" style="cursor:pointer;" @click="deleteArea(item.id)">删除</el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-if="item.type===2 && !item.x" label="注意">该区域尚未划定禁区，请点击”修改“划定！</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisible" title="区域信息">
        <el-steps style="margin-bottom: 20px" :space="200" :active="step" finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="禁区划定"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <div v-if="step===0">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="区域名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="推流地址" prop="src">
              <el-input v-model="form.src"></el-input>
            </el-form-item>
            <el-form-item label="坐标点x" prop="a">
              <el-input v-model="form.a"></el-input>
            </el-form-item>
            <el-form-item label="坐标点y" prop="b">
              <el-input v-model="form.b"></el-input>
            </el-form-item>
            <el-form-item label="禁区类型">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="step===1">
          <monitor-area-view ref="canvas" :currentCameraUrl="img"
                             @initialized="initCanvas"
                             @finished="updateAreaLabel"></monitor-area-view>
        </div>
        <div v-if="step===2">
          <el-result icon="success" :title="form_type==='create'?'添加成功':'修改成功'" subTitle="请刷新页面获取新的监控区域信息">
            <template slot="extra">
              <el-button type="primary" size="medium" @click="dialogVisible=false">确认</el-button>
            </template>
          </el-result>
        </div>
        <div style="width: 100%;display: flex;justify-content: space-around">
          <el-button v-if="step!==2" style="margin-top: 12px;" @click="next">下一步</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import {addArea, deleteArea, getAreaList, searchArea, updateArea} from "@/api/monitorApi";
import MonitorAreaView from "@/views/monitor/MonitorAreaView";

    export default {
        name: "MonitorView",
      components: {MonitorAreaView},
      data() {
        return {
          name: "indexJK",
          dialogVisible: false, //弹出框
          list:[],//监控区域列表
          step:0,//步骤条

          old_data:{},//更新前数据
          form_type:'create',//表单类型
          form: {
            id:'',
            name: '',
            type: '',
            src: '',
            a:'',
            b:''
          },
          rules: {
            name: [
              { required: true, message: '请输入区域名称', trigger: 'blur' },
            ],
            src: [
              { required: true, message: '请输入推流地址', trigger: 'blur' }
            ],
            a: [
              { required: true, message: '请输入x坐标点', trigger: 'blur' },
            ],
            b: [
              { required: true, message: '请输入y坐标点', trigger: 'blur' }
            ]
          },
          options:[
            {
              label:"无",
              value:0
            },
            {
              label:"下半部分禁区",
              value:1
            },
            {
              label:"矩形禁区",
              value:2
            }
          ],
          img:'',
          keyword:'',
          refresh:false
        };
      },
      created() {
          this.getAreaList()
      },
      methods: {
          //获取监控列表信息
          getAreaList(){
            getAreaList().then(res => {
              if(res.code===200 && res.result){
                this.list = res.result
              }else{
                alert(res.msg)
              }
            }).catch(err => {
              console.log(err);
            })
          },
        //删除区域
        deleteArea(id){
          let params = {
            id:id
          }
          deleteArea(params).then(res => {
            if(res.code===200){
              this.$message.success("删除成功！")
              this.getAreaList()
            }else{
              alert(res.msg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
        /**
         * 修改区域信息
         * 接口:/camera/update
         * */
        updateArea(){
          let params = {
            id:this.form.id,
            name:this.form.name,
            url:this.form.src,
            type:this.form.type,
            x:this.old_data.x,
            y:this.old_data.y,
            width:this.old_data.width,
            length:this.old_data.length,
            w:this.old_data.w,
            h:this.old_data.h,
            a:this.form.a,
            b:this.form.b

          }
          updateArea(params).then(res => {
            if(res.code===200){
              if(params.type===2){
                if(params.url!==this.old_data.url){
                  this.old_data = {}
                }
                this.img = res.result.img
                console.log(this.img)
                this.step = 1
              }
              else this.step=2
            }else{
              alert(res.msg)
              this.dialogVisible = false
            }
          }).catch(err => {
            console.log(err);
          })
          setTimeout(() => {
            this.getAreaList()
          }, 1000)
        },
        initCanvas(){
          if(this.old_data.x){
            this.$refs.canvas.drawRectWithParam(this.old_data.x,this.old_data.y,this.old_data.width,this.old_data.length)
          }
        },
        resetForm(){
          this.form = {
            id:'',
            name: '',
            type: '',
            src: '',
            a:'',
            b:''
          }
        },
        updateAreaLabel(label){
          let params = {
            id:this.form.id,
            name:this.form.name,
            url:this.form.src,
            type:this.form.type,
            x:label.x,
            y:label.y,
            width:label.width,
            length:label.height,
            a:this.form.a,
            b:this.form.b
          }
          updateArea(params).then(res => {
            if(res.code===200){
              this.step=2
            }else{
              alert(res.msg)
              this.dialogVisible = false
            }
          }).catch(err => {
            console.log(err);
          })
          this.getAreaList()
        },
        //添加区域信息
        addArea(){
            let params = {
              name:this.form.name,
              url:this.form.src,
              type:this.form.type
            }
            console.log(params)
          addArea(params).then(res => {
            if(res.code===200){
              if(params.type===2){
                this.img = res.result.img
                console.log(this.img)
                this.form.id = res.result.id
                this.step = 1
              }else this.step = 2
            }else{
              alert(res.msg)
              this.dialogVisible = false
            }
          }).catch(err => {
            console.log(err);
          })
        },
        next(){
            if(this.step===0){
              this.submitForm()
            }
            else {
              this.step++
            }
        },
        back(){
          this.step--;
        },
        openDialog(item){
          this.resetForm()
          this.step = 0
          this.old_data = {}
          this.form_type = 'create'
            if(item.id) {
              this.old_data = item
              this.form.id = item.id
              this.form.name = item.name
              this.form.src = item.url
              this.form.type = item.type
              this.form.a = item.a
              this.form.b = item.b
              this.form_type = 'update'
            }
            console.log("open:",this.form_type)
          this.dialogVisible = true

        },
        submitForm() {
          this.$refs.form.validate((valid) => {
            if (valid) {
              if(this.form_type==='create'){
                this.addArea()
              }else{
                this.updateArea()
              }
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        handleFilter() {
          this.refresh = true
          searchArea(this.keyword).then(res => {
            if(res.code===200 && res.result){
              this.list = res.result
              this.refresh = false
            }else{
              alert(res.msg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
        iconClick() {
          this.getAreaList()
          this.keyword = ""
        },
        toDetail(id){
          console.log(id)
          this.$router.push({
            path:'/home/monitor/detail/'+id
          })
        }
      }

    }
</script>

<style scoped>
.videoBox{
  padding: 10px;
  width: 400px;
}
</style>
